import { useEffect, useRef } from "react";

export default function App() {
  // 1. 定义 ref 数据
  const inputRef = useRef(null);

  useEffect(() => {
    // 初始化渲染完成触发
    // React框架不建议开发者直接操作DOM元素，可能性能不好
    // const inputEl = document.querySelector(".username");
    // console.log(inputEl);

    // 3. 获取ref
    console.log(inputRef.current);
  }, []);

  return (
    <div>
      用户名：
      {/* 2. 给元素添加ref属性，值就是ref数据 */}
      <input type="text" className="username" ref={inputRef} />
    </div>
  );
}
